<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简历详情 - AI简历生成应用</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-50 pb-28 pt-14">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow fixed top-0 left-0 right-0 z-10">
      <div
        class="h-14 flex items-center justify-center relative px-4 max-w-md mx-auto"
      >
        <a href="list.html" class="absolute left-4">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 text-gray-600"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </a>
        <h1 class="text-lg font-medium">简历详情</h1>
        <div class="absolute right-4 flex items-center">
          <button id="share-btn" class="text-purple-600 mr-5">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
              />
            </svg>
          </button>
          <button id="more-btn" class="text-gray-600">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-5 w-5"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- 简历内容 -->
    <div
      class="mx-auto max-w-xl bg-white shadow-sm rounded-b-xl overflow-hidden"
    >
      <!-- 简历头部 -->
      <div
        class="bg-gradient-to-r from-purple-600 to-indigo-600 p-6 text-white"
      >
        <h2 class="text-xl font-bold mb-1">张先生</h2>
        <div class="text-sm text-purple-100 mb-4">高级产品经理 · 4年经验</div>
        <div class="flex items-center text-sm">
          <div class="flex items-center mr-4">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 mr-1"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
              />
            </svg>
            <span>138****5678</span>
          </div>
          <div class="flex items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 mr-1"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
              />
            </svg>
            <span>zhang@example.com</span>
          </div>
        </div>
      </div>

      <!-- 个人信息 -->
      <div class="p-6 border-b border-gray-100">
        <div class="flex items-center text-sm text-gray-600 mb-1">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 mr-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
            />
          </svg>
          <span>男 | 1990-01-15 | 北京市</span>
        </div>
        <div class="flex items-center text-sm text-gray-600">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-4 w-4 mr-1"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
            />
          </svg>
          <span>4年工作经验</span>
        </div>
      </div>

      <!-- 求职意向 -->
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          求职意向
          <a href="edit-intention.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <div class="flex flex-wrap">
          <div
            class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm mr-2 mb-2"
          >
            产品经理
          </div>
          <div
            class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm mr-2 mb-2"
          >
            互联网行业
          </div>
          <div
            class="bg-purple-50 text-purple-700 px-3 py-1 rounded-full text-sm mr-2 mb-2"
          >
            北京市
          </div>
        </div>
      </div>

      <!-- 自我评价 -->
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          自我评价
          <a href="edit-summary.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <p class="text-sm text-gray-600 leading-relaxed">
          拥有4年互联网产品经验，负责过多款用户端产品从0到1的设计开发和迭代优化，对用户需求分析、产品规划和项目管理有丰富经验。擅长与研发、设计和业务团队协作，推动产品落地。具有较强的数据分析能力，能够基于数据做出产品决策。熟悉敏捷开发流程，具备优秀的沟通协调能力和解决问题的能力。
        </p>
      </div>

      <!-- 教育背景 -->
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          教育背景
          <a href="edit-education.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <div class="mb-4">
          <div class="flex justify-between mb-1">
            <h4 class="text-sm font-medium text-gray-900">北京大学</h4>
            <div class="text-xs text-gray-500">2010.09 - 2014.06</div>
          </div>
          <div class="text-sm text-gray-600">计算机科学与技术 | 本科</div>
        </div>
      </div>

      <!-- 工作经历 -->
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          工作经历
          <a href="edit-work.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <!-- 工作经历项1 -->
        <div class="mb-4">
          <div class="flex justify-between mb-1">
            <h4 class="text-sm font-medium text-gray-900">智慧科技有限公司</h4>
            <div class="text-xs text-gray-500">2020.07 - 至今</div>
          </div>
          <div class="text-sm text-gray-600 mb-2">高级产品经理</div>
          <p class="text-sm text-gray-600 leading-relaxed">
            负责公司核心产品的需求分析、产品规划和迭代优化，主导了产品从0到1的设计和开发，带领团队完成多次重大版本迭代，产品月活用户增长300%。负责与研发、设计和业务团队的协作，保障产品按时高质量交付。
          </p>
        </div>
        <!-- 工作经历项2 -->
        <div>
          <div class="flex justify-between mb-1">
            <h4 class="text-sm font-medium text-gray-900">
              创新网络科技有限公司
            </h4>
            <div class="text-xs text-gray-500">2017.03 - 2020.06</div>
          </div>
          <div class="text-sm text-gray-600 mb-2">产品经理</div>
          <p class="text-sm text-gray-600 leading-relaxed">
            负责公司电商平台的产品设计和需求管理，参与产品战略规划和功能优化，完成了支付系统升级和物流系统改造等多个重点项目，提升了用户转化率和留存率。
          </p>
        </div>
      </div>

      <!-- 项目经历 -->
      <div class="p-6 border-b border-gray-100">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          项目经历
          <a href="edit-project.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <!-- 项目经历项1 -->
        <div class="mb-4">
          <div class="flex justify-between mb-1">
            <h4 class="text-sm font-medium text-gray-900">智能客服系统</h4>
            <div class="text-xs text-gray-500">2021.05 - 2021.12</div>
          </div>
          <div class="text-sm text-gray-600 mb-2">项目负责人</div>
          <p class="text-sm text-gray-600 leading-relaxed">
            负责智能客服系统的产品规划和设计，基于NLP技术实现智能问答和服务分流，通过数据分析和用户反馈持续优化系统。项目上线后客服人力成本降低30%，用户满意度提升15%。
          </p>
        </div>
        <!-- 项目经历项2 -->
        <div>
          <div class="flex justify-between mb-1">
            <h4 class="text-sm font-medium text-gray-900">企业数据分析平台</h4>
            <div class="text-xs text-gray-500">2019.08 - 2020.03</div>
          </div>
          <div class="text-sm text-gray-600 mb-2">产品经理</div>
          <p class="text-sm text-gray-600 leading-relaxed">
            设计并实现了企业级数据分析平台，整合多源数据，提供可视化分析工具和报表功能，支持业务决策。该平台目前服务公司全部业务线，大幅提高了数据分析效率和准确性。
          </p>
        </div>
      </div>

      <!-- 专业技能 -->
      <div class="p-6">
        <h3 class="text-base font-medium text-gray-900 mb-3 flex items-center">
          专业技能
          <a href="edit-skills.html" class="ml-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-4 w-4 text-gray-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
              />
            </svg>
          </a>
        </h3>
        <div class="flex flex-wrap">
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            产品原型设计
          </div>
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            需求分析
          </div>
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            数据分析
          </div>
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            项目管理
          </div>
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            用户研究
          </div>
          <div class="bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
            敏捷开发
          </div>
        </div>
      </div>
    </div>

    <!-- 底部操作栏 -->
    <div
      class="fixed bottom-16 left-0 right-0 h-14 bg-white border-t border-gray-200 flex items-center px-4 z-10"
    >
      <a
        href="edit-info.html"
        class="flex-1 flex justify-center items-center border border-purple-600 text-purple-600 py-2 rounded-md text-sm mr-2"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 mr-1"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
          />
        </svg>
        编辑简历
      </a>
      <a
        href="optimize.html"
        class="flex-1 flex justify-center items-center bg-purple-600 text-white py-2 rounded-md text-sm ml-2"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 mr-1"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M13 10V3L4 14h7v7l9-11h-7z"
          />
        </svg>
        智能优化
      </a>
    </div>

    <!-- 底部更多操作菜单 -->
    <div
      id="action-menu"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-end justify-center z-20 hidden"
    >
      <div class="bg-white rounded-t-xl w-full max-w-md">
        <div class="p-4 border-b border-gray-100">
          <h3 class="text-base font-medium text-gray-900 text-center">
            更多操作
          </h3>
        </div>
        <div class="p-2">
          <a
            href="export.html?type=pdf"
            class="flex items-center p-3 hover:bg-gray-50 rounded-lg"
          >
            <div
              class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-red-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                />
              </svg>
            </div>
            <div class="flex-1">
              <div class="text-gray-900">导出为PDF</div>
              <div class="text-xs text-gray-500">生成PDF格式简历文件</div>
            </div>
          </a>
          <a
            href="export.html?type=word"
            class="flex items-center p-3 hover:bg-gray-50 rounded-lg"
          >
            <div
              class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-blue-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <div class="flex-1">
              <div class="text-gray-900">导出为Word</div>
              <div class="text-xs text-gray-500">生成Word格式简历文件</div>
            </div>
          </a>
          <a
            href="#"
            id="delete-btn"
            class="flex items-center p-3 hover:bg-gray-50 rounded-lg"
          >
            <div
              class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-3"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-4 w-4 text-red-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                />
              </svg>
            </div>
            <div class="flex-1">
              <div class="text-red-500">删除简历</div>
              <div class="text-xs text-gray-500">删除此简历（不可恢复）</div>
            </div>
          </a>
        </div>
        <div class="p-4">
          <button
            id="cancel-btn"
            class="w-full py-2.5 bg-gray-100 rounded-md text-gray-800 text-sm font-medium"
          >
            取消
          </button>
        </div>
      </div>
    </div>

    <!-- 删除确认对话框 -->
    <div
      id="delete-confirm"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-30 hidden"
    >
      <div class="bg-white rounded-xl p-5 w-5/6 max-w-sm">
        <h3 class="text-base font-medium text-gray-900 mb-3">确认删除</h3>
        <p class="text-sm text-gray-600 mb-5">
          确定要删除这份简历吗？此操作不可恢复。
        </p>
        <div class="flex space-x-3">
          <button
            id="delete-cancel"
            class="flex-1 py-2 border border-gray-300 text-gray-700 rounded-md text-sm"
          >
            取消
          </button>
          <button
            id="delete-confirm-btn"
            class="flex-1 py-2 bg-red-500 text-white rounded-md text-sm"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>

    <!-- 底部标签栏 -->
    <iframe
      src="../common/tabbar.html"
      class="fixed bottom-0 left-0 w-full h-16 border-none"
    ></iframe>

    <script>
      // 更多操作菜单
      const moreBtn = document.getElementById("more-btn");
      const actionMenu = document.getElementById("action-menu");
      const cancelBtn = document.getElementById("cancel-btn");

      moreBtn.addEventListener("click", () => {
        actionMenu.classList.remove("hidden");
      });

      cancelBtn.addEventListener("click", () => {
        actionMenu.classList.add("hidden");
      });

      // 删除确认
      const deleteBtn = document.getElementById("delete-btn");
      const deleteConfirm = document.getElementById("delete-confirm");
      const deleteCancel = document.getElementById("delete-cancel");
      const deleteConfirmBtn = document.getElementById("delete-confirm-btn");

      deleteBtn.addEventListener("click", () => {
        actionMenu.classList.add("hidden");
        deleteConfirm.classList.remove("hidden");
      });

      deleteCancel.addEventListener("click", () => {
        deleteConfirm.classList.add("hidden");
      });

      deleteConfirmBtn.addEventListener("click", () => {
        // 实际应用中这里应该发送删除请求
        window.location.href = "list.html";
      });

      // 分享功能
      const shareBtn = document.getElementById("share-btn");

      shareBtn.addEventListener("click", () => {
        // 实际应用中这里应该实现分享功能
        // 为了演示，我们显示一个简单的提示
        const toast = document.createElement("div");
        toast.className =
          "fixed top-16 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white px-4 py-2 rounded-lg text-sm z-50";
        toast.textContent = "分享链接已复制";
        document.body.appendChild(toast);

        // 2秒后移除提示
        setTimeout(() => {
          toast.remove();
        }, 2000);
      });
    </script>
  </body>
</html>
